/* ==========================================================================
  ESG Form - Global Variables
========================================================================== */

.esg-form {
  /* Typography */
  --font-body: Arial, sans-serif;
  --font-display: "Metropolis", sans-serif;

  /* Utility Colors */
  --color-transparent: transparent;
  --color-current: currentColor;

  /* Core Colors */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Red Color Scale */
  --color-red-50: #fae6ea;
  --color-red-100: #f5ced5;
  --color-red-200: #eb9dac;
  --color-red-300: #e06b82;
  --color-red-400: #d63a59;
  --color-red-500: #cc092f;
  --color-red-600: #a30726;
  --color-red-700: #7a051c;
  --color-red-800: #520413;
  --color-red-900: #290209;
  --color-red-950: #140105;

  /* Blue Color Scale */
  --color-blue-50: #e6f5f9;
  --color-blue-100: #cceaf4;
  --color-blue-200: #99d6e9;
  --color-blue-300: #66c1dd;
  --color-blue-400: #33add2;
  --color-blue-500: #0098c7;
  --color-blue-600: #007a9f;
  --color-blue-700: #005b77;
  --color-blue-800: #003d50;
  --color-blue-900: #001e28;
  --color-blue-950: #000f14;

  /* Gray Color Scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #e7e8e9;
  --color-gray-200: #cfd1d2;
  --color-gray-300: #b8babc;
  --color-gray-400: #a0a3a6;
  --color-gray-500: #888c90;
  --color-gray-600: #707479;
  --color-gray-700: #585d63;
  --color-gray-800: #41464d;
  --color-gray-900: #292f36;
  --color-gray-950: #111820;

  /* ==========================================================================
    Form Base Styles
  ========================================================================== */

  .elq-form * {
    color: var(--color-gray-800);
    font-family: var(--font-display) !important;
    line-height: calc(1rem + 0.5em);
  }

  /* Remove default horizontal padding in layout */
  .elq-form .layout {
    padding-inline: 0 !important;
  }

  /* Uniform padding for form elements */
  .elq-form .form-element-layout {
    padding: 4px !important;
  }

  /* Label styling */
  .elq-form .elq-label {
    color: var(--color-black);
    cursor: pointer;
    display: inline-block !important;
    margin-block-end: 4px;
    font-size: 15px !important;
    font-weight: 500 !important;
  }

  .elq-form .elq-item-label {
    cursor: pointer;
  }

  /* Input / Select / Textarea styling */
  .elq-form :is(.elq-item-input, .elq-item-select, .elq-item-textarea) {
    background-color: var(--color-white) !important;
    border-radius: 4px !important;
    border: 1px solid var(--color-gray-200) !important;
    color: var(--color-gray-800);
    height: 48px !important;
    padding-inline: 16px !important;
  }

  /* Vertical spacing between grouped fields */
  .elq-form .field-control-wrapper > * + * {
    margin-block-start: 16px;
  }

  /* Inline checkbox/radio list styling */
  .elq-form .field-control-wrapper > .list-order {
    display: inline-flex;
    align-items: center;
  }

  /* Add spacing for first inline field */
  .elq-form .field-control-wrapper > .list-order:first-child {
    margin-block-start: 8px;
  }

  .elq-form .single-checkbox-row {
    display: inline-flex;
    align-items: center;
  }

  /* Spacing for aligned checkboxes */
  .elq-form .field-control-wrapper > .checkbox-aligned {
    margin: 1px 0 0 8px;
  }

  .elq-form .field-control-wrapper > .checkbox-aligned:first-child {
    margin-top: 8px;
  }

  /* Sizing for checkbox and radio inputs */
  .elq-form :is([type="checkbox"], [type="radio"]) {
    width: 18px;
    height: 18px;
  }

  /* Heading spacing */
  .elq-form .elq-heading {
    margin-block-start: 8px;
  }

  /* Instructional text */
  .elq-form .form-element-instruction {
    font-size: 13px;
    color: var(--color-gray-900);
    margin-block: 8px;
  }

  /* Invalid input styling */
  .elq-form .LV_invalid {
    color: var(--color-red-500) !important;
    font-size: 12px !important;
  }

  .elq-form .LV_validation_message:not(.LV_valid) {
    display: inline-block !important;
    font-weight: bold !important;
    margin-inline-start: 4px !important;
  }

  /* Red outline for invalid fields on hover/focus */
  .elq-form
    :is(
      .LV_invalid_field,
      input.LV_invalid_field:active,
      input.LV_invalid_field:hover,
      textarea.LV_invalid_field:active,
      textarea.LV_invalid_field:hover
    ) {
    outline: 1px solid var(--color-red-500);
  }

  /* Opt-in checkbox styling */
  .elq-form [name="optIn"] {
    align-self: baseline;
    margin: 2px 8px 0 0 !important;
  }

  .elq-form [name="optIn"] + label {
    font-size: 12px;
    margin-inline-start: 0;
  }

  /* Submit button styles */
  .elq-form .submit-button-style {
    background-color: var(--color-blue-500);
    border-radius: 4px;
    border: 2px solid var(--color-blue-500);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 32px;
    text-transform: uppercase;
    transition: 250ms ease;
  }

  /* Hover state for submit button */
  .elq-form .submit-button-style:hover {
    color: var(--color-blue-500);
    background-color: var(--color-white);
  }

  /* ==========================================================================
    OneTrust Consent Styling
  ========================================================================== */

  #onetrust-consent-sdk * {
    font-family: var(--font-body);
  }
}

/* ==========================================================================
  Embed Helper Classes (e.g., for videos or iframes)
========================================================================== */

.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}